<div class="card">
    <div class="card-block">
        <form clrForm>
            <clr-select-container>
                <label>Namespace</label>
                <select name="namespace" [(ngModel)]="namespace" (change)="listPod()" clrSelect>
                    <option *ngFor="let ns of namespaces" [ngValue]="ns">{{ns.metadata.name}}</option>
                </select>
            </clr-select-container>
            <clr-select-container>
                <label>Pod</label>
                <select name="pod" [(ngModel)]="pod" (change)="onPodChange()" clrSelect>
                    <option *ngFor="let p of pods" [ngValue]="p">{{p.metadata.name}}</option>
                </select>
            </clr-select-container>
            <clr-select-container *ngIf="pod">
                <label>Container</label>
                <select name="container" [(ngModel)]="container" clrSelect>
                    <option *ngFor="let c of pod.spec.containers" [ngValue]="c">{{c.name}}</option>
                </select>
            </clr-select-container>
        </form>
    </div>
    <div class="card-footer">
        <button class="btn btn-primary" (click)="search()" [disabled]="!pod||!namespace||!container">Query</button>
    </div>
</div>


<div class="card">
    <div class="card-block">
        <div #terminal></div>
    </div>
</div>
